<!--  -->
<template>
  <div>
    <Card>
      <div slot="title" >
         <Button v-if="btnp.jsgli_xzjs" @click="handleClickAdd" class="zh-hollow" type="primary" icon="plus-round">新增角色</Button>
      </div>
      <Table :loading="loading" border :columns="columns" :data="data"></Table>
      <Page :current.sync='pageNumber' :total="total" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
    </Card>
    <Modal v-model="modal_role" :title="modalTitle" :loading="saveLoad" @on-ok="save"  ok-text="保存" cancel-text="放弃操作" :mask-closable="false">
      <Form  :label-width="80" style="padding:15px 30px;">
        <FormItem label="角色名称">
          <Input v-model="roleName" ></Input>
        </FormItem>
      </Form>
    </Modal> 
    <Modal :loading="operatorLoad" v-model="modal_power" title="修改权限" @on-ok="saveOperator"  ok-text="保存" cancel-text="放弃操作" :mask-closable="false">
      <div style="padding:15px 30px;">
        <Tree :data="treeData" show-checkbox ></Tree>
      </div>
    </Modal> 
  </div>
</template>

<script>
import util from '@/libs/util.js'
import {getRoleTable,saveRole,deleteRole,getRolePowerTree,getSelectedTree,getSaveOperator} from '@/libs/system.js'
export default {
  name:'',
  data () {
    return {
      btnp:{},
      btn:{
        jsgli_xzjs:false,
        jsgli_bj:false,
        jsgli_xgqx:false,
        jsgli_sc:false
      },
      saveIDs:[],
      operatorLoad:true,
      treeRoleUuid:'',
      treeData:[],
      role_uuid:'',
      saveLoad:true,
      pageSize:10,
      pageNumber:1,
      modal_power:false,
      modal_role:false,
      modalTitle:'',
      roleName:'',
      total:0,
      loading:true,
      columns:[
        {
          key:'names',
          title:'角色名称',
        },
        {
          key:'time',
          title:'新增时间'
        },
        {
          key:'action',
          title:'操作',
          align:'center',
          fixed:'right',
          render:(h,params)=>{
            //判断是否显示某些操作按钮
            return h('div',[
              h('Button',{
                props:{
                  type:'text',
                  size:'small',
                  display:this.btnp.jsgli_bj?'inline-block':'none'
                },
                style:{
                  color:'#2D8CF0'
                },
                on:{
                  click:()=>{
                    this.modalTitle="编辑角色信息";
                    this.modal_role=true;
                    this.role_uuid=params.row.uuid;
                    this.roleName=params.row.names;
                  }
                }
              },'编辑'),
              h('Button',{
                props:{
                  type:'text',
                  size:'small'
                },
                style:{
                  color:'#2D8CF0',
                  display:this.btnp.jsgli_xgqx?'inline-block':'none'
                },
                on:{
                  click:()=>{
                    
                    this.getPubTree(params.row.uuid);
                  }
                }
              },'修改权限'),
              h('Button',{
                props:{
                  type:'text',
                  size:'small'
                },
                style:{
                  color:'#EA0000',
                  display:this.btnp.jsgli_sc?'inline-block':'none'
                },
                on:{
                  click:()=>{
                    let config={
                      title:'删除角色',
                      content:'角色删除后无法恢复。',
                      okText:'删除',
                      cancelText:'放弃操作',
                      onOk:()=>{
                        this.delete(params.row.uuid)
                      }
                    }
                    this.$Modal.confirm(config)
                  }
                }
              },'删除')
            ])
          }
        }
      ],
      data:[]
    };
  },
  methods:{
    getOperatorId(arr){
      let a=arr.map(item=>{
        if(!!item.checked&&item.id.startsWith('operator_')){
          this.saveIDs.push(item.id)
        }
        if(!!item.children&&item.children.length>0){
          item.children=this.getOperatorId(item.children)
        }
        return item
      })
      return a
    },
    async saveOperator(){
      this.saveIDs=[];
      this.getOperatorId(this.treeData);
      let operatorTree=this.saveIDs.join(',');

      let res= await getSaveOperator({operatorTree,uuid:this.treeRoleUuid});
      if(res.data.code==200){
        this.$Notice.success({
          desc:'保存成功'
        });
        this.modal_power=false;
      }else{
        this.$Notice.error({
          desc:res.data.msg
        })
      }
      this.operatorLoad=false;
      let that=this;
      setTimeout(()=>{
        that.operatorLoad=true;
      },500)
    },
    selectCheck(tree,arr){
      let newtree=tree.map(item=>{
        item.title=item.name;
        if(arr.includes(item.id)){
          item.checked=true;
        }else{
          item.checked=false;
        }
        if(item.id.startsWith('module_')){
          item.disableCheckbox=true;
        }else{
          item.disableCheckbox=false;
        }
        if(!!item.children&&item.children.length>0){
          item.children=this.selectCheck(item.children,arr)
        }
        return item
      })
      return newtree
    },
    async getPubTree(uuid){
      this.treeRoleUuid=uuid;
      let tree=await getRolePowerTree(uuid);
      let selectTree=await getSelectedTree(uuid);
      if(tree.data.code===200&&selectTree.data.code===200){
        let operators=selectTree.data.data.operatoruuid.split(',');
        this.treeData=this.selectCheck(tree.data.data,operators);
        this.modal_power=true;

      }else{
        this.$Notice.error({
          desc:'未知错误'
        });
      }
      // let response=res.data;
      // if(response.code===200){
      //   this.treeData=response.data;
      // }else{
      //   this.$Notice.error({
      //     desc:response.msg
      //   });
      // }
    },
    async getTable(){
      this.loading=true;
      let res=await getRoleTable(this.pageSize,this.pageNumber);
      let response=res.data;
      if(response.code===200){
        this.total=response.data.total;
        this.data=response.data.rows.map(item=>{
          if(!!item.created){
            item.time=item.created.slice(0,16)
          }else{
            item.time='';
          }
          return item
        });
      }else{
        this.$Notice.error({
          desc:response.msg
        });
      }
       this.loading=false;
    },
    async delete(uuid){
      let res=await deleteRole(uuid);
      let response=res.data;
      if(response.code===200){
        this.$Notice.success({
          desc:'已删除'
        });
        this.modal_role=false;
        this.pageNumber=1;
        this.getTable();
      }else{
        this.$Notice.error({
          desc:response.msg
        });
      }
    },
    async save(){
      let res=await saveRole({uuid:this.role_uuid,names:this.roleName});
      let response=res.data;
      if(response.code===200){
        this.$Notice.success({
          desc:'保存成功'
        });
        this.modal_role=false;
        this.pageNumber=1;
        this.getTable();
      }else{
        this.$Notice.error({
          desc:response.msg
        });
      }
      this.saveLoad=false;
      let that=this;
      setTimeout(()=>{
        that.saveLoad=true;
      },500)
      
    },
    pageSizeChange(size){
      this.pageNumber=1;
      this.pageSize=size;
      this.getTable();
    },
    pageChange(number){
        this.pageNumber=number;
        this.getTable();
    },
    handleClickAdd(){
      this.modalTitle="新增角色";
      this.modal_role=true;
    }
  },
  watch:{
    modal_role:function(){
      if(!this.modal_role){
        this.roleName='';
      }
    },
    modal_power:function(){
      if(!this.modal_power){
        this.treeData=[];
      }
    }
  },
  created(){
    this.btnp=util.bpower(this,this.btn);
    this.getTable();
  }
}

</script>
<style lang='scss' >
</style>